<!DOCTYPE html>


  <html class="light page-post">


<head>
  <meta charset="utf-8">
  
  <title>Axure RP添加页面内滚动效果 | 东窗随笔</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="Axure," />
  

  <meta name="description" content="&amp;#x5728;Axure&amp;#x4E2D;&amp;#x4E00;&amp;#x4E2A;&amp;#x9875;&amp;#x9762;&amp;#x5185;&amp;#x4F7F;&amp;#x7528;&amp;#x6EDA;&amp;#x52A8;&amp;#x9875;&amp;#x9762;">
<meta property="og:type" content="article">
<meta property="og:title" content="Axure RP添加页面内滚动效果">
<meta property="og:url" content="http://hanlyjiang.github.io/2016/08/18/Axure-RP添加页面内滚动效果/index.html">
<meta property="og:site_name" content="东窗随笔">
<meta property="og:description" content="&amp;#x5728;Axure&amp;#x4E2D;&amp;#x4E00;&amp;#x4E2A;&amp;#x9875;&amp;#x9762;&amp;#x5185;&amp;#x4F7F;&amp;#x7528;&amp;#x6EDA;&amp;#x52A8;&amp;#x9875;&amp;#x9762;">
<meta property="og:updated_time" content="2016-12-08T10:13:52.796Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Axure RP添加页面内滚动效果">
<meta name="twitter:description" content="&amp;#x5728;Axure&amp;#x4E2D;&amp;#x4E00;&amp;#x4E2A;&amp;#x9875;&amp;#x9762;&amp;#x5185;&amp;#x4F7F;&amp;#x7528;&amp;#x6EDA;&amp;#x52A8;&amp;#x9875;&amp;#x9762;">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=d671a41f" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?57e94d016e201fba3603a8a2b0263af0";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  
    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  

  
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  
</head>

<body>


  
    <span id="toolbox-mobile" class="toolbox-mobile">观乎</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">观乎</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/category/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/tag/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/atom.xml"
            rel="noopener noreferrer"
            target="_blank"
            >
            RSS
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="ROUND_RECT"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#方法一动态面板"><span class="toc-text">方法一：动态面板</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#方法二内部框架"><span class="toc-text">方法二：内部框架</span></a></li></ol>
  </div>



<div class="content content-post CENTER">
   <article id="post-Axure-RP添加页面内滚动效果" class="article article-type-post" itemprop="blogPost">
  <header class="article-header">
    <h1 class="post-title">Axure RP添加页面内滚动效果</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.08.18</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>hanlyjiang@outlook.com</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/产品设计/">产品设计</a>
  </span>



      
        <span>
          <i class="icon-comment"></i>
          <a href="http://hanlyjiang.site/2016/08/18/Axure-RP添加页面内滚动效果/#disqus_thread"></a>
        </span>
      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      

      
      
    </div>
  </header>

  <div class="article-content">
    
      <p>&#x5728;Axure&#x4E2D;&#x4E00;&#x4E2A;&#x9875;&#x9762;&#x5185;&#x4F7F;&#x7528;&#x6EDA;&#x52A8;&#x9875;&#x9762;<br><a id="more"></a></p>
<h2 id="&#x65B9;&#x6CD5;&#x4E00;&#x52A8;&#x6001;&#x9762;&#x677F;"><a href="#&#x65B9;&#x6CD5;&#x4E00;&#xFF1A;&#x52A8;&#x6001;&#x9762;&#x677F;" class="headerlink" title="&#x65B9;&#x6CD5;&#x4E00;&#xFF1A;&#x52A8;&#x6001;&#x9762;&#x677F;"></a>&#x65B9;&#x6CD5;&#x4E00;&#xFF1A;&#x52A8;&#x6001;&#x9762;&#x677F;</h2><ol>
<li>&#x5728;&#x5F53;&#x524D;&#x9875;&#x9762;&#x753B;&#x4E00;&#x4E2A;&#x52A8;&#x6001;&#x9762;&#x677F;&#xFF0C;&#x5355;&#x673A;&#x9009;&#x4E2D;&#xFF0C;&#x7136;&#x540E;&#x5728;&#x5728;Axure&#x53F3;&#x8FB9;&#x7684;&#x90E8;&#x4EF6;&#x5C5E;&#x6027;&#x548C;&#x6837;&#x5F0F;&#x4E2D;&#x4F7F;&#x7528;&#x6309;&#x9700;&#x663E;&#x793A;&#x7EB5;&#x5411;&#x6EDA;&#x52A8;&#x6761;&#x3002;&#x6CE8;&#x610F;&#x52A8;&#x6001;&#x9762;&#x677F;&#x7684;&#x5927;&#x5C0F;&#x548C;&#x5176;&#x4E2D;&#x5185;&#x5BB9;&#x7684;&#x5927;&#x5C0F;&#x3002;     </li>
<li>&#x53CC;&#x51FB;&#x52A8;&#x6001;&#x9762;&#x677F;&#x5F39;&#x51FA;&#x52A8;&#x6001;&#x9762;&#x677F;&#x7BA1;&#x7406;&#x9875;&#x9762;&#xFF0C;&#x53CC;&#x51FB;state&#x8FDB;&#x5165;&#x65B0;&#x7A97;&#x53E3;&#xFF0C;&#x5728;&#x65B0;&#x7A97;&#x53E3;&#x4E2D;&#x7F16;&#x8F91;&#x8981;&#x5B9E;&#x73B0;&#x6EDA;&#x52A8;&#x6548;&#x679C;&#x7684;&#x5185;&#x5BB9;&#xFF08;&#x865A;&#x7EBF;&#x8303;&#x56F4;&#x5916;&#x7684;&#x5185;&#x5BB9;&#x4F1A;&#x901A;&#x8FC7;&#x6EDA;&#x52A8;&#x67E5;&#x770B;&#xFF09;&#x3002;     </li>
</ol>
<h2 id="&#x65B9;&#x6CD5;&#x4E8C;&#x5185;&#x90E8;&#x6846;&#x67B6;"><a href="#&#x65B9;&#x6CD5;&#x4E8C;&#xFF1A;&#x5185;&#x90E8;&#x6846;&#x67B6;" class="headerlink" title="&#x65B9;&#x6CD5;&#x4E8C;&#xFF1A;&#x5185;&#x90E8;&#x6846;&#x67B6;"></a>&#x65B9;&#x6CD5;&#x4E8C;&#xFF1A;&#x5185;&#x90E8;&#x6846;&#x67B6;</h2><p>&#x6709;&#x4E2A;&#x201C;&#x5185;&#x90E8;&#x6846;&#x67B6;&#x201D;&#x7EC4;&#x4EF6;&#xFF0C;&#x82F1;&#x6587;&#x53EB;inline frame&#x3002; &#x53F3;&#x952E;-&#x6309;&#x9700;&#x663E;&#x793A;&#x6EDA;&#x52A8;&#x6761;&#x3002;&#x5E76;&#x8BBE;&#x7F6E;&#x91CC;&#x9762;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x6BD4;&#x8F83;&#x957F;&#xFF0C;&#x6BD4;&#x8F83;&#x7A84;&#xFF0C;&#x4E0D;&#x8D85;&#x8FC7;&#x5BBD;&#x5EA6;&#x5C31;&#x4E0D;&#x663E;&#x793A;&#x6A2A;&#x5411;&#x6EDA;&#x52A8;&#x6761;&#x4E86;&#xFF0C;&#x8D85;&#x8FC7;&#x9AD8;&#x5EA6;&#x5C31;&#x663E;&#x793A;&#x7AD6;&#x7740;&#x7684;&#x6EDA;&#x52A8;&#x6761;&#x4E86;&#x3002;</p>

    
  </div>
</article>

</div>


  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持HanlyJiang</div>
        <ul class="theme.donation.items.length">
        
          <li class="item">
            <img src="/images/qr-wechat.png" alt="">
          </li>
        
          <li class="item">
            <img src="/images/qr_zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>




  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/category/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/tag/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/atom.xml"
              rel="noopener noreferrer"
              target="_blank"
              >
              RSS
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="ROUND_RECT"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    
  <section class="disqus-comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>

  <script>
    var disqus_shortname = 'forsigner';
    
    var disqus_url = 'http://hanlyjiang.github.io/2016/08/18/Axure-RP添加页面内滚动效果/';
    
    (function(){
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
  </script>

  <script id="dsq-count-scr" src="//forsigner.disqus.com/count.js" async></script>



    




  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>

</body>
</html>
